<template>
  <view>
    <add-order-cell v-if="flag" label="支付方式" border-radius="14rpx 14rpx 0 0" un-hover has-slot>
      <l-radio-group :checked="value" :radios="payWay" @change="form.payWay = $event.value" />
    </add-order-cell>

    <add-order-cell label="客户名称" has-slot :must="form.payWay==3">
      <tui-dropdown-list
        shadow
        :transition="false"
        :height="530"
        :top="-uerTop"
        :show="!!(showUsername&&customerNameList.length)"
        background-color="#fff"
        class="flex-item"
      >
        <input
          slot="selectionbox"
          v-model="form.username"
          style="height:66rpx;"
          type="text"
          class="text-30 color-t1"
          placeholder="请输入客户名称"
          placeholder-class="color-t3"
          @click.stop="getPageCustomer"
          @focus="showUsername=true"
        >
        <template slot="dropdownbox">
          <scroll-view style="max-height: 530rpx;" scroll-y @scrolltolower="nextPage">
            <view
              v-for="(val,key) in customerNameList"
              :key="key"
              class="padding-lr-20 item"
              hover-class="hover"
              :hover-stay-time="70"
              @click="chooseUser(val,key,'showUsername')"
            >
              <view class="list-item flex-row align-center">
                <text class="text-30 color-t1">{{ val }}</text>
              </view>
            </view>
          </scroll-view>
        </template>
      </tui-dropdown-list>
    </add-order-cell>

    <add-order-cell label="客户手机号" border-radius="0 0 14rpx 14rpx" has-slot unlined>
      <tui-dropdown-list
        shadow
        :transition="false"
        :height="530"
        :top="-phoneTop"
        :show="!!(showCustomerPhone&&customerPhoneList.length)"
        background-color="#fff"
        class="flex-item"
      >
        <input
          slot="selectionbox"
          v-model="form.customerPhone"
          style="height:66rpx;"
          type="number"
          class="text-30 color-t1"
          placeholder="请输入客户手机号"
          placeholder-class="color-t3"
          @input="getPageCustomer"
          @focus="showCustomerPhone=true"
        >
        <template slot="dropdownbox">
          <scroll-view style="max-height: 530rpx;" scroll-y @scrolltolower="nextPage">
            <view
              v-for="(val,key) in customerPhoneList"
              :key="key"
              class="padding-lr-20 item"
              hover-class="hover"
              :hover-stay-time="70"
              @click="chooseUser(val,key,'showCustomerPhone')"
            >
              <view class="list-item flex-row align-center">
                <text class="text-30 color-t1">{{ val }}</text>
              </view>
            </view>
          </scroll-view>
        </template>
      </tui-dropdown-list>
    </add-order-cell>
  </view>
</template>

<script>
import AddOrderCell from '../add-order-cell/add-order-cell'
import { getCustomer } from '@/common/api/user'
import { payWay } from '../../index'
export default {
  name: 'OrderCustomerModule',
  components: {
    AddOrderCell
  },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    flag: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      value: 0,
      payWay,
      form: {
        payWay: 3, // 支付方式
        username: '', // 乘车客户名称
        customerPhone: ''// 乘车客户电话
      },
      customerList: [], // 客户列表
      current: 1, // 页码
      limit: 10, // 每页多少个
      hasMore: true, // 是否有下一页
      showUsername: false, // 显示客户名称列表
      showCustomerPhone: false, // 显示客户电话列表
      uerTop: 0, // 客户名称列表定位值
      phoneTop: 0, // 客户电话列表定位值
      customerPhoneList: [], // 客户电话列表
      customerNameList: []// 客户名称列表
    }
  },
  watch: {
    form: {
      handler(e) {
        this.$emit('update', e)
      },
      deep: true
    },
    data: {
      handler(e) {
        Object.keys(this.form).forEach(item => {
          this.form[item] = e[item]
        })
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.getPageCustomer()
  },
  methods: {
    // 获取客户列表
    async getPageCustomer() {
      const [err, res] = await getCustomer({
        current: this.current,
        limit: this.limit,
        name: this.form.username,
        phone: this.form.customerPhone
      })
      if (!this.$http.errorCheck(err, res)) return false
      let list = res.data.data.records
      if (!list) list = []
      if (list.length < this.limit) this.hasMore = false
      if (this.current === 1) this.customerList = list
      else this.customerList.push(...list)
      this.customerNameList = this.customerList.map(item => item.name)
      this.customerList.forEach(item => {
        if (item.phone && this.customerPhoneList.indexOf(item.phone) === -1) this.customerPhoneList.push(item.phone)
      })
      this.uerTop = (this.customerNameList.length < 5 ? this.customerNameList.length : 5) * 106
      this.phoneTop = (this.customerPhoneList.length < 5 ? this.customerPhoneList.length : 5) * 106
    },
    // 客户列表下一页
    nextPage() {
      if (this.hasMore) {
        this.current++
        this.getPageCustomer()
      }
    },
    // 选择客户
    chooseUser(val, key, type) {
      if (type === 'showUsername') {
        this.form.username = val
        this.customerList.forEach(item => {
          if (item.name === val && item.phone) this.form.customerPhone = item.phone
        })
      } else {
        this.form.customerPhone = val
        this.customerList.forEach(item => {
          if (item.phone === val) this.form.username = item.name
        })
      }
      this[type] = false
    }
  }
}
</script>

<style scoped lang="scss">
.list-item{
  border-bottom:2rpx solid $color-border;
  height:106rpx;
}
.item:last-child .list-item{
  border:none;
}
</style>
